<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .grid-container {
          display: grid;
          grid-template-columns: auto auto auto;
          background-color: #2196F3;
          padding: 10px;
        }
        .grid-item {
          background-color: rgba(255, 255, 255, 0.8);
          border: 1px solid rgba(0, 0, 0, 0.8);
          padding: 20px;
          font-size: 30px;
          text-align: center;
        }
        .grid-item:hover
        {
            background-color: yellow;
        }
        </style>
        <div class="grid-container">
                <div class="grid-item">1</div>
                <div class="grid-item">2</div>
                <div class="grid-item">3</div>  
                <div class="grid-item">4</div>
                <div class="grid-item">5</div>
                <div class="grid-item">6</div>  
                <div class="grid-item">7</div>
                <div class="grid-item">8</div>
                <div class="grid-item">9</div>  
        </div>          
        <script>
          function into_menu(p_name)
{
    window.open(p_name + "/index.html")
}
var main_menu = document.getElementsByClassName("grid-container").item(0)

var item_length = document.getElementsByClassName("grid-item").length
// var item1 = main_menu.getElementsByClassName("grid-item").item(0)
// item1.addEventListener("click", function()
// {
//     into_menu("漫评")
// });

for(var i = 0; i<item_length ; i++)
{
    (function(index) {
        var each = main_menu.getElementsByClassName("grid-item").item(index)
        each.addEventListener("click", function() {
            console.log(index);
            // 根据索引值执行相应的代码
            if(index == 0)
            {
                into_menu("漫评")
            }
        });
    })(i);
}
        </script>
</body>
</html>
